<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="../install/ChemDoodleWeb.css" type="text/css">
<script type="text/javascript" src="../install/ChemDoodleWeb-libs.js"></script>
<script type="text/javascript" src="../install/ChemDoodleWeb.js"></script>
<title>ChemDoodle Web Component PerspectiveCanvas: Styled and Interactive Mass Spectrum</title>
</head>
<body>
<script>
	// initialize component and set visual specifications
	var perspectiveMass = new ChemDoodle.PerspectiveCanvas('perspectiveMass', 500, 200);
	// change the plot line color to a green
	perspectiveMass.specs.plots_color="#00B918";
	// make the plot lines thicker
	perspectiveMass.specs.plots_width=2;
	// change the font of the spectrum
	perspectiveMass.specs.text_font_size = 14;
	perspectiveMass.specs.text_font_families[0] = "Impact";
	perspectiveMass.specs.text_font_families[1] = "Charcoal";
	perspectiveMass.specs.text_font_families[2] = 'sans-serif';

	//load data and read into a spectrum
	var spectrumJcampFile = '##TITLE= 2-Chlorophenol\n##JCAMP-DX= 5.00   $$ ISAS JCAMP-DX program (V.1.0)\n##DATA TYPE= MASS SPECTRUM\n##DATA CLASS= PEAKTABLE\n##ORIGIN= H. Mayer, ISAS Dortmund\n##OWNER= COPYRIGHT (C) 1993 by ISAS Dortmund, FRG\n##SPECTROMETER/DATA SYSTEM= Finnigan MAT Magnum\n##INSTRUMENTAL PARAMETERS= LOW RESOLUTION\n##.SPECTROMETER TYPE= TRAP  $$ ion trap spectrometer\n##.INLET= GC                $$ gas chromatograph as inlet\n##.IONIZATION MODE= EI+     $$ electron impact ionization with positiv polarity\n##.BASE PEAK= 128\n##.BASE PEAK INTENSITY= 687729 COUNTS\n##.RIC= 3063043\n##XUNITS= M/Z\n##YUNITS= RELATIVE ABUNDANCE\n##NPOINTS= 26\n##PEAK TABLE= (XY..XY)\n50, 5.84\n51, 9.55\n52, 4.19\n53, 1.12\n54, 12.67\n60, 3.80\n61, 10.16\n62, 13.47\n63, 58.30\n64, 60.43\n65, 33.02\n66, 4.32\n72, 1.70\n75, 1.62\n91, 1.03\n92, 24.95\n93, 4.20\n94, 1.25\n99, 7.20\n100, 19.83\n101, 3.45\n102, 6.47\n128, 100.00\n129, 6.52\n130, 32.45\n131, 2.13\n##END=\n';
	var spectrum = ChemDoodle.readJCAMP(spectrumJcampFile);
	// customize the axis titles
	spectrum.xUnit = "m/z";
	spectrum.yUnit = "Relative Abundance";
	perspectiveMass.loadSpectrum(spectrum);
</script>
<br>
<a href="http://web.chemdoodle.com" title="Open Source HTML5 Chemistry - ChemDoodle Web Components"><img src="http://web.chemdoodle.com/resources/images/badges/badge120x60.png" /></a>
</body>
</html>